<template>
  <el-row>
    <el-text tag="b">已选：</el-text>
    <el-tag closable v-for="item in productSelect" :key="item.id" type="success">{{ item.name }}</el-tag>
  </el-row>
  <el-row>
    <TreeSlideShow :list="categoryList" title="类别目录" @get-node-data="getNodeProduct" :span="6"></TreeSlideShow>
    <el-col :span="18">
      <el-table ref="productTableRef" :data="productList" @select="handleProductSelect">
        <el-table-column align="center" type="selection"></el-table-column>
        <el-table-column align="center" label="物料名称" prop="name"></el-table-column>
        <el-table-column align="center" label="物料编号" prop="code"></el-table-column>
        <el-table-column align="center" label="规格型号" prop="model"></el-table-column>
        <el-table-column align="center" label="单位" prop="unit"></el-table-column>
        <!-- <el-table-column align="center" label="备注" prop="remark"></el-table-column> -->
        <template #empty>
          <el-empty v-loading="tableLoading"></el-empty>
        </template>
      </el-table>
    </el-col>
  </el-row>
  <el-row class="footer">
    <div>
      <el-button type="primary" plain @click="close">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </div>
  </el-row>
</template>
<script setup>
import TreeSlideShow from '@/components/tree/TreeSlideShow.vue';
import { nextTick, ref, watch } from 'vue'
import { getTypeId, getCategoryList, getProductList } from '@/api/equipment/whm'
const productSelect = ref([])
const productTableRef = ref(null)
const tableLoading = ref(false)
/** 表格数据 */
const productList = ref([
  // {
  //   id: 1,
  //   name: '1',
  //   code: 'code',
  //   model: 'mode',
  //   typeId: 2,
  //   categoryId: 2,
  //   unit: 'unit',
  //   remark: 'remark',
  //   quantity: 20,
  // },
  // {
  //   id: 2,
  //   name: '2',
  //   code: 'code',
  //   model: 'mode',
  //   typeId: 2,
  //   categoryId: 2,
  //   unit: 'unit',
  //   remark: 'remark',
  //   quantity: 20,
  // }
])
/** 获取父元素传入的数据 */
const props = defineProps({
  productSelected: Array,
})


/** 获取类目列表 */
const categoryList = ref([])
const typeId = ref(null)
async function init() {
  await getTypeId('备品备件').then(res => {
    typeId.value = res.data.data.id
  })
  await getCategoryList(typeId.value).then(res => {
    categoryList.value = res.data.data
  })
}
init()
/** 获取product 列表 */
async function getNodeProduct(data) {
  console.log(data)
  tableLoading.value = true
  await getProductList(data.id, typeId.value).then(res => {
    productList.value = res.data.data
    console.log(productList.value)
  })
  tableLoading.value = false
}




/** 显示tags */
function handleProductSelect(selection) {
  console.log('变化', selection)
  productSelect.value = selection
}
/** 页脚取消确认 */
const emit = defineEmits(['close', 'confirm'])
function close() {
  emit('close')
}
function confirm() {
  console.log(productTableRef.value.getSelectionRows())
  emit('confirm', productTableRef.value.getSelectionRows())
}

/** 监听父元素传入的数据变化,同步两边的数据 */
// watch(
//   () => props.productSelected,
//   (newValue) => {
//     nextTick(() => {
//       // productSelect.value = newValue
//       console.log('watch', newValue)
//       if (newValue.length === 0) {
//         productTableRef.value.clearSelection()
//       } else {
//         newValue.forEach(item => {
//           productTableRef.value.toggleRowSelection(item, true)
//         })
//       }
//     })
//   },
//   { deep: true, immediate: true }
// )
/** 通过id回显数据 */
watch(
  [() => props.productSelected, () => productList.value],
  (newValue) => {
    nextTick(() => {
      console.log('watch', newValue)
      productTableRef.value.clearSelection()
      productSelect.value = []
      // if (newValue[0].length === 0) {
      //   productTableRef.value.clearSelection()
      //   productSelect.value = []
      // } else {
      if (newValue[0].length > 0) {
        let array = []
        newValue[0].forEach(propSelect => {
          productList.value.forEach(item => {
            if (item.id === propSelect.id) {
              array.push(item)
            }
          })
        })
        if (array) {
          console.log('array', array)
          array.forEach(item => {
            productTableRef.value.toggleRowSelection(item, true)
            productSelect.value = array
          })
        }
      }
    })
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="less">
.footer {
  width: 100%;

  div {
    width: 260px;
    margin: 0 auto;
  }
}

:deep(th.el-table__cell) {
  background-color: var(--el-color-primary-light-7) !important;
}
</style>